<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 22 22"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="currentColor" d="m18.876 11.914-1.75.001a.847.847 0 0 1-.624-.251.844.844 0 0 1-.252-.623.85.85 0 0 1 .251-.624.844.844 0 0 1 .623-.252l1.75-.001c.248 0 .456.083.624.251a.843.843 0 0 1 .252.623.848.848 0 0 1-.251.624.843.843 0 0 1-.623.252Zm-3.847 3.328a.799.799 0 0 1 .568-.35.904.904 0 0 1 .657.174l1.4 1.049a.8.8 0 0 1 .351.568.904.904 0 0 1-.174.657.8.8 0 0 1-.569.35.903.903 0 0 1-.656-.174l-1.4-1.049a.8.8 0 0 1-.351-.568.904.904 0 0 1 .174-.657Zm2.616-9.277-1.399 1.051a.904.904 0 0 1-.656.176.799.799 0 0 1-.569-.35.904.904 0 0 1-.176-.656.799.799 0 0 1 .35-.569l1.399-1.051a.903.903 0 0 1 .656-.176.8.8 0 0 1 .57.35.904.904 0 0 1 .175.656.8.8 0 0 1-.35.569ZM4.877 13.677h-.875c-.48.001-.893-.17-1.236-.513a1.682 1.682 0 0 1-.515-1.235l-.002-1.75c0-.481.17-.893.514-1.237a1.682 1.682 0 0 1 1.235-.514l3.5-.004 3.038-1.84c.292-.175.587-.175.886 0 .299.174.449.429.45.764l.007 7.394c0 .336-.15.591-.449.766-.299.176-.594.176-.885.001l-3.043-1.835-.875.001.003 2.625a.847.847 0 0 1-.252.624.843.843 0 0 1-.622.252.848.848 0 0 1-.624-.251.843.843 0 0 1-.252-.623l-.003-2.625Zm7.876.299-.006-5.863a4 4 0 0 1 .954 1.28c.24.503.361 1.053.361 1.65a3.767 3.767 0 0 1-.36 1.653c-.24.503-.556.93-.95 1.28Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Trumpet extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
